<template>
  <div class="check-list">
    <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="儿童户籍地址" prop="censusRegister">
            <el-input v-model="formData.censusRegister" :disabled='isDisabled' placeholder="请输入儿童户籍地址" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="儿童身份证号" prop="idCard">
            <el-input v-model="formData.idCard" :disabled='isDisabled' placeholder="请输入儿童身份证号" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="幼儿园名称" prop="schoolName">
            <el-input v-model="formData.schoolName" :disabled='isDisabled' placeholder="请输入幼儿园名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="监护人姓名" prop="motherName">
            <el-input v-model="formData.motherName" :disabled='isDisabled' placeholder="请输入监护人姓名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="监护人联系电话" prop="motherPhone">
            <el-input v-model="formData.motherPhone" :disabled='isDisabled' placeholder="请输入监护人联系电话" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <p>基本信息</p>
        <el-col :span="8">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="formData.name" :disabled='isDisabled' placeholder="请输入姓名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="姓别" prop="sex">
            <el-select v-model="formData.sex" :disabled='isDisabled' placeholder="请选择姓别" clearable :style="{width: '100%'}">
              <el-option
                v-for="dict in dict.type.sys_user_sex"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="年龄" prop="age">
            <el-input v-model="formData.age" :disabled='isDisabled' placeholder="请输入年龄" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <div style="width: 100%;height: 100%;display: flex;justify-content: flex-start;">
          <el-col :span="8">
          <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                :disabled='isDisabled'
                clearable
                size="small"
                v-model="formData.birthday"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择出生日期"
              >
            </el-date-picker>
          </el-form-item>
        </el-col>
        </div>
      </el-row>
      <el-row :gutter="15">
        <p>既往病史</p>
        <el-form-item  prop="pastHistory">
          <el-radio-group v-model="formData.pastHistory" size="medium">
            <el-radio v-for="(item, index) in dict.type.past_history" :disabled='isDetailDisabled' :key="index" :label="item.value">{{item.label}}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="过敏史" prop="allergicHistory">
          <el-input v-model="formData.allergicHistory" :disabled='isDetailDisabled' type="textarea" placeholder="请输入过敏史"
            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="监护人姓名" prop="guardianName">
          <el-input v-model="formData.guardianName" :disabled='isDetailDisabled' placeholder="请输入监护人姓名" clearable :style="{width: '30%'}">
          </el-input>
        </el-form-item>
      </el-row>
      <el-row :gutter="15">
        <p>体格检查</p>
        <el-col :span="8">
          <el-form-item label="体重" prop="weight">
            <el-input v-model="formData.weight" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="身高" prop="height">
            <el-input v-model="formData.height" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="皮肤" prop="skin">
            <el-input v-model="formData.skin" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
         <el-col :span="8">
            <div class="flex">
              <el-form-item label="左眼" prop="leftEye">
                <el-input v-model="formData.leftEye" :disabled='isDetailDisabled' placeholder="请输入" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
              <el-form-item label="左眼视力" prop="leftEyeVision">
                <el-input v-model="formData.leftEyeVision" :disabled='isDetailDisabled' placeholder="请输入" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
            </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="左耳" prop="leftEar">
            <el-input v-model="formData.leftEar" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="口腔牙齿数" prop="oralToothNum">
            <el-input v-model="formData.oralToothNum" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
         <el-col :span="8">
            <div class="flex">
              <el-form-item label="右眼" prop="rightEye">
                <el-input v-model="formData.rightEye" :disabled='isDetailDisabled' placeholder="请输入" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
              <el-form-item label="右眼视力" prop="rightEyeVision">
                <el-input v-model="formData.rightEyeVision" :disabled='isDetailDisabled' placeholder="请输入" clearable
                  :style="{width: '100%'}"></el-input>
              </el-form-item>
            </div>
        </el-col>
        <el-col :span="8">
          <el-form-item label="右耳" prop="rightEar">
            <el-input v-model="formData.rightEar" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="口腔龋齿数" prop="decayedTeethNum">
            <el-input v-model="formData.decayedTeethNum" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="头颅" prop="head">
            <el-input v-model="formData.head" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="胸廓" prop="pleural">
            <el-input v-model="formData.pleural" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="脊柱四肢" prop="spineLimbs">
            <el-input v-model="formData.spineLimbs" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="咽部" prop="pharyngeal">
            <el-input v-model="formData.pharyngeal" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="心肺" prop="cardiopulmonary">
            <el-input v-model="formData.cardiopulmonary" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="肝脾" prop="liverSpleen">
            <el-input v-model="formData.liverSpleen" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="外生殖器" prop="externalGenitalia">
            <el-input v-model="formData.externalGenitalia" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="其他" prop="physiqueOthers">
            <el-input v-model="formData.physiqueOthers" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <div>
            <p>检查结果</p>
              <el-col :span="8">
                <el-form-item label="血红蛋白（HB）" prop="hb">
                  <el-input v-model="formData.hb" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="丙氨酸氨基转移酶（ALT）" prop="alt">
                  <el-input v-model="formData.alt" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="其他" prop="examinationOthers">
                  <el-input v-model="formData.examinationOthers" :disabled='isDetailDisabled' placeholder="请输入" clearable :style="{width: '100%'}">
                  </el-input>
                </el-form-item>
              </el-col>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="15">
        <el-form-item label="检查结果" prop="checkResult">
          <el-input v-model="formData.checkResult" :disabled='isDetailDisabled' type="textarea" placeholder="请输入检查结果"
            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
        <el-form-item label="医生意见" prop="doctorAdvice">
          <el-input v-model="formData.doctorAdvice" :disabled='isDetailDisabled' type="textarea" placeholder="请输入医生意见"
            :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
        </el-form-item>
      </el-row>
      <el-row :gutter="15">
        <el-col :span="8">
          <el-form-item label="医生姓名" prop="doctorName">
            <el-input v-model="formData.doctorName" :disabled='isDetailDisabled' placeholder="请输入医生姓名" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="体检日期" prop="physicalDate">
              <el-date-picker
                :disabled='isDetailDisabled'
                clearable
                size="small"
                v-model="formData.physicalDate"
                type="date"
                value-format="yyyy-MM-dd "
                placeholder="请选择体检日期"
              >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="检查单位" prop="hospitalName">
            <el-input v-model="formData.hospitalName" :disabled='isDetailDisabled' placeholder="请输入检查单位" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item size="large" v-if="!isDetailDisabled" style="text-align:right">
        <el-button @click="resetForm">取消</el-button>
        <el-button type="primary" @click="submitForm">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import { addHealthList } from "@/api/mindSystem/studenthealth.js";
export default {
  components: {},
  dicts: ['sys_user_sex','past_history'],
  data() {
    return {
      isDisabled:false,
      isDetailDisabled:false,
      formData: {
        schoolCode:null,
        censusRegister: '',
        idCard: '',
        schoolName: '',
        motherName: '',
        motherPhone: '',
        name: '',
        sex: '',
        birthday: '',
        pastHistory: '',
        allergicHistory: '',
        guardianName: '',
        weight: '',
        height: '',
        field132: '',
        field133: '',
        leftEar: '',
        oralToothNum: '',
        rightEar: '',
        decayedTeethNum: '',
        head: '',
        leftEye: '',
        leftEyeVision: '',
        pleural: '',
        spineLimbs: '',
        pharyngeal: '',
        checkResult: '',
        doctorAdvice: '',
        doctorName: '',
        physicalDate: '',
        hospitalName: '',
        middle:''
      },
      rules:{
         physicalDate: [
          { required: true, message: "体检日期不能为空", trigger: "blur" }
        ],
        weight:[
          { required: true, message: "体重不能为空", trigger: "blur" }
        ],
        height:[
          { required: true, message: "身高不能为空", trigger: "blur" }
        ]
      },
    }
  },
  created() {
    if(this.$route.query.status==1){
      this.middle = this.$route.query.result;
      console.log('this.middle',this.middle);
      this.formData.name = this.middle.studentName
      this.formData.sex = this.middle.sex
      this.formData.age = this.middle.age
      this.formData.birthday = this.middle.birthday
      this.formData.schoolName = this.middle.title
      this.formData.censusRegister = this.middle.adressx
      this.formData.idCard = this.middle.idcard
      this.formData.motherName = this.middle.parentName
      this.formData.motherPhone = this.middle.parentPhone
      this.formData.stuId = this.middle.id
    }else{
      this.formData = this.$route.query.result
      this.isDetailDisabled = true
      this.isDisabled = true
    }
  },
  mounted() {},
  methods: {
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        this.formData.schoolCode = this.$store.getters.schoolCode,
        addHealthList(this.formData)
        .then((res)=>{
          // console.log('res',res);
          if(res.code == 200){
            // this.msgSuccess("新增成功");
            this.$router.push({
              path: "/mindSystem/studetail",
              query: {
                classId: this.formData.stuId,
                // result: result, // 传递result数据
              },
            });
          }else {
            this.msgError(response.msg);
          }
        })
      })
    },
    resetForm() {
       this.$router.push({
              path: "/mindSystem/studetail",
              query: {
                classId: this.formData.stuId,
                // result: result, // 传递result数据
              },
      });
    },
  }
}

</script>
<style lang="scss" scoped>
.check-list{
  padding: 5px 30px;
  box-sizing: border-box;
  background-color: #f2f3f5;
  .el-row{
    background-color: #fff;
    margin: 20px 0;
    padding:20px;
    border-radius: 5px;
    .el-col{
      .el-date-editor{
        width: 100%;
      }
    }
    .flex{
      display: flex;
    }
  }
  ::v-deep .el-form-item{
            display: flex;
            flex-direction: column;
            .el-form-item__label{
              width: 100%!important;
              text-align: left;
            }
            .el-form-item__content{
              margin-left: 0 !important;
            }
      }
}
</style>
